<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>


<script lang="ts">
    export default {//默认暴露
        name:'Person',
        setup() {
            //数据
            let name = "张三"//此时的name不是响应式的
            let age = 18//此时的age不是响应式的
            let tel = 13888888888//此时的tel不是响应式的

            //方法
            function changeName(){
                name = "zhang-san"
            }
            function changeAge(){
                age +=1
            }
            function showTel(){
                alert(tel)
            }

            return {//将数据和方法“交出去”才生效
                name,
                age,
                changeName,
                changeAge,
                showTel
            }
        }
    }
</script>


<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
</style>